<template>
    <div>
        <van-tabs class="list" @change="change" v-model="active">
            <van-tab v-for="item in tabs"  :key="item.id" :title="item.name">
                 
            </van-tab>
        </van-tabs>
        <van-list   v-model="loading" :finished="finished" @load="onLoad">
            <batch  v-for="item in list" :key="item.BH" :item="item" @success="success"></batch>            
        </van-list>
       
        <div v-show="false" class="menu">
            <div class="price">
                <span class="left">平均单价：<b>0</b>元</span>
                <span class="right">合计<b>0</b>元</span>
            </div>
            <ul class="btns">
                <li style="text-align:left;padding-left: 10px;">
                    <van-checkbox @click.native="checkAll" v-model="allCheck">全选</van-checkbox>
                </li>
                <!-- <li><i class="iconfont icon-ziyuanbaosongpiliangtijiao"></i> 批量挂单</li> -->
                <li>
                    <van-button class="send" size="large" type="primary"><i class="iconfont icon-fasong"></i>交易完成</van-button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import batch from '@/components/batchRMB.vue'
    import batch2 from '@/components/batchMJ.vue'
    import api from '@/api/api'
    import {
        Toast
    } from 'vant';
    export default {
        components: {
            batch,
            batch2
        },
        data() {
            return {
                allCheck: false,
                pageIndex: 1,
                pageIndex2: 1,
                loading: false,
                finished: false,
                status:1,
                pageSize: 50,
                pageSize2: 50,
                tabs: [{
                    name: '人民币',
                    id: 1
                }, {
                    name: '美金',
                    id: 2
                }],
                active: 0,
                list: [],
                count: 0,
            }
        },
        created() {
        },
        methods: {
            onLoad() {
                
                if(!this.status)
                {
                    return;
                }
                status = 0;
                var para = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    OpenID: this.$store.state.userInfo.OpenID,
                    BatchType: this.active==0?'1,3,4,5':'2'
                }
                api.getShopCartList(para).then(res => {
                    this.loading = false;
                    this.count = res.count;
                    res.list.forEach(n => {
                        n.checked = false;
                        this.list.push(n);
                    });
                    if (res.list.length == 0 || res.list.length < 10) {
                        this.finished = true;
                        Toast("已加载全部")
                    } else {
                        Toast("已加载" + (this.pageIndex * this.pageSize > this.count ? this.count : this.pageIndex * this.pageSize) + '/' + this.count);
                        this.pageIndex++;
                    }
                    this.status = 1;
                })
            },
            change() {
                this.loading = false;
                this.finished = false;
                 this.pageIndex = 1;
                 this.list = [];
                 //this.getList();
            },
            getList() {
                this.pageIndex = 1;
                this.list = [];
                var para = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    OpenID: this.$store.state.userInfo.OpenID,
                    BatchType: this.active==0?'1,3,4,5':'2'
                }
                api.getShopCartList(para).then(res => {
                    this.loading = false;
                    res.list.forEach(n => {
                        n.checked = false;
                    });
                    this.list = res.list;
                    this.pageIndex++;
                })
            },
            checkAll() {
                if (this.active == 0) {
                    this.list.forEach(n => {
                        n.checked = this.allCheck;
                    });
                } else {
                    this.list2.forEach(n => {
                        n.checked = this.allCheck;
                    });
                }
            },
            success(item) {
                var that = this;
                setTimeout(() => {
                    that.getList();
                }, 1000);
            },
        },
    }
</script>

<style scoped lang='less'>
    .list {
        // margin-bottom: 5.5em;
    }
    .menu {
        position: fixed;
        width: 100%;
        bottom: 0;
        background: #fff;
        .price {
            font-size: 14px;
            padding: 0.5em 1em;
            .left {
                float: left;
            }
            .right {
                float: right;
            }
        }
        .btns {
            display: flex;
            clear: both;
            border: 1px solid #f2f2f2;
            li {
                flex: 1;
                line-height: 3em;
                text-align: center;
                border-right: 1px solid #f2f2f2;
                .send {
                    background-color: #FF9900;
                    border-color: #FF9900;
                }
            }
        }
    }
</style>